<template>
	<div>
		<ion-header class="orderDetail">
		  <ion-toolbar>
		    <ion-buttons slot="start">
		      <ion-back-button></ion-back-button>
		    </ion-buttons>
		    <ion-title>订单详情</ion-title>
		  </ion-toolbar>
		</ion-header>
    <ion-content class="ordercon">
        <div class="orderlist" v-if="orderItems !=null && orderItems.length > 0" >
            <div class="listbox2"  v-for="(item,index) in orderItems" :key="index">
              
                <div class="box_left">
                    <img :src="item.imageUrl" v-if="item && item.imageUrl !=null"/>
                    <img src="../assets/images/p1.jpg" v-else/>
                    <div class="left_con">
                       
                        <h3 class="tit">{{item.name}}</h3>
												<h4>{{giftGiveTypes[item.saleType]}}</h4>
                        <span class="spec">{{item.spec}}</span>
                        <h5>x {{item.num}}</h5>
												<p class="price">
                            <strong class="cprice">￥<em>{{item.amount}}</em></strong>
                            <span class="uprice">{{item.salePrice}}元/{{item.unit}}</span>
                        </p>
                    </div>
                </div>
               
            </div>
        </div>
        <div class="blankDiv " v-else> <span > 请选择订单 ~  </span> </div>
       <!-- <div class="cart_price">
            合计：<span>￥<i>{{vanOrder.amount}}</i></span>
        </div>
        <div class="cart_pay">
            <div class="tit">收款方式</div>
            <div class="con">
                <button v-for="(type) in paymentTypes" :class="[paymentType==type.value?'active':'']"
                        @click="checkPaymentType(type.value)" :key="type.value">{{type.name}}
                </button>
            </div>
        </div> -->
    </ion-content>
		<div class="floatbox">
				<div class="tit">
					<p>合计：<span>￥<i>{{vanOrder.amount}}</i></span></p>
					<h3 v-if="vanOrder.status != 'PAID'">收款方式</h3>
					<h4 v-else>收款方式：<strong>{{paymentTypeMap[vanOrder.paymentType]}}</strong></h4>
				</div>
				<div class="con" v-if="vanOrder.status != 'PAID'">
					 <button v-for="(type) in paymentTypes" :class="[paymentType==type.value?'active':'']"
									 @click="checkPaymentType(type.value)" :key="type.value">{{type.name}}
					 </button>
				</div>
		</div>
		<div class="footbar" ref="footBtnRef" v-if=" vanOrder.status == 'PAID'" >
			<!-- <button class="foot_btn0" @click="toPrint">
			    <span class="txt">打印订单</span>
			</button> -->
       <button class="foot_btn4" @click="toPrint">
		        <span class="txt">打印订单</span>
		    </button>
		    <button class="foot_btn5" @click="openPage('home')">
		        <span class="txt">首页</span>
		    </button>
		    <button class="foot_btn4" @click="openPage('vanTypes')">
		        <span class="txt">商城</span>
		    </button>
		</div>
		<div class="footbar" ref="footBtnRef"  v-else>
		    <button class="foot_btn4" @click="toDeleted">
		        <span class="txt">删除订单</span>
		    </button>
		    <button class="foot_btn5" @click="toPay">
		        <span class="txt">支付完成</span>
		    </button>
		</div>
	</div>
</template>
<script>
import { Stepper, Actionsheet } from "vant";
import router from "../router";
import baseUtil from "@/utils/baseUtil";
import { orderDetail, toPay, deletedOrder } from "@/api/vanProducts";
export default {
  name:"orderDetail" ,
  components: {
    [Stepper.name]: Stepper
    // [Actionsheet.name]: Actionsheet
  },
  data() {
    return {
      // showGiveTypeAction: false,
      orderItems: [],
      vanOrder: {},
      paymentTypes: baseUtil.paymentTypeList,
      giftGiveType: baseUtil.saleTypeList,
      paymentTypeMap:baseUtil.paymentType,
      giftGiveTypes:baseUtil.saleType,
      paymentType: "",
      orderNumber: ""
    };
  },
  onLoad() {},
  methods: {
    //选择支付方式
    checkPaymentType(paymentType) {
      console.log("checkPaymentType===1:", this.paymentType);
      if (this.vanOrder.status != "PAID") this.paymentType = paymentType;
    },
    //删除订单
    async toDeleted() {
      if (baseUtil.isBlank(this.orderNumber))
        this.presentToast("订单信息异常，请刷新页面", "secondary");

      this.$ionic.alertController
        .create({
          header: "提示",
          // subHeader: 'Subtitle',
          message: "确认删除？",
          buttons: [
            {
              text: "取消",
              role: "cancel",
              cssClass: "secondary",
              handler: blah => {
                console.log("Confirm 取消:", blah);
              }
            },
            {
              text: "确认",
              handler: () => {
                console.log("Confirm 确认");
                this.deleted();
              }
            }
          ]
        })
        .then(a => a.present());
    },
    async deleted() {
      let param = { orderNumber: this.orderNumber };
      let resp = await deletedOrder(param);
      console.log("===orderDetail  deleted-resp:", resp);
      if (baseUtil.isNotBlankObjs(resp)) {
        if (resp.code == 0) {
          this.presentToast("已删除", "secondary");
          this.$router.push({ name: "home" });
        }
      }
    },
    // 订单支付
    async toPay() {
      if (baseUtil.isBlank(this.paymentType))
        this.presentToast("请选择支付方式", "warning");
      if (baseUtil.isBlank(this.orderNumber))
        this.presentToast("订单信息异常，请刷新页面", "secondary");

      let param = {
        orderNumber: this.orderNumber,
        paymentType: this.paymentType
      };
      let resp = await toPay(param);
      console.log("toPay=====resp:", resp);
      if (baseUtil.isNotBlankObjs(resp)) {
        if (resp.code == 0) {
          this.presentToast("库存已更新", "success");
          this.initOrderInfo();
          }
        else if (resp.code == 400)
          this.presentToast(resp.warnMessage, "primary");
        else this.presentToast("回调异常", "danger");
      }
    },
    //打印按钮
    async toPrint(){
      // this.presentToast('这是 打印按钮 ' , 'primary');
      this.$router.push({name:'orderPrint',query:{orderNumber:this.orderNumber}})
    },
    openPage(pathName){
      this.$router.push({name:pathName})
    },
    //初始化订单明细
    async initOrderInfo() {
      // console.log(
      //   "===============initOrderInfo  orderNumber:",
      //   this.orderNumber
      // );
      let param = { orderNumber: this.orderNumber };
      let resp = await orderDetail(param);
      console.log("initOrderInfo-resp:", resp);
      if (baseUtil.isNotBlankObjs(resp) && baseUtil.isNotBlankObjs(resp.data)) {
        this.orderItems = resp.data.orderItems;
        this.vanOrder = resp.data.order;
        this.paymentType = this.vanOrder.paymentType ;
      }
    },
    //弹出警告 提示等信息
    //color:"primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark"
    async presentToast(msg, color) {
      color = color == null || color == "" ? "success" : color;
      const toast = await this.$ionic.toastController.create({
        message: msg,
        duration: 1000,
        color: color,
        position: "top"
      });
      toast.present();
    },
    //alert提示
    presentAlert(msg) {
      return this.$ionic.alertController
        .create({
          header: "提示",
          // subHeader: 'Subtitle',
          message: msg,
          buttons: [
            {
              text: "取消",
              role: "cancel",
              cssClass: "secondary",
              handler: blah => {
                console.log("Confirm 取消:", blah);
              }
            },
            {
              text: "确认",
              handler: () => {
                console.log("Confirm 确认");
              }
            }
          ]
        })
        .then(a => a.present());
    }
  },
  mounted() {
    this.orderNumber = this.$route.query.orderNumber;
    console.log("===============mounted  orderNumber:", this.orderNumber);
    if (baseUtil.isBlank(this.orderNumber)) return;
    this.initOrderInfo();
  }
};
</script>

<style>
.orderDetail .ion-padding,
[padding] {
  padding: 0;
}

.orderlist {
  height: auto;
  overflow: hidden;
	padding-bottom:9rem;
}

</style>